Ayer hablábamos de generadores, en concreto de Isdntek.
Allí tenemos "Image Mapper" es un generador que añade enlaces sobre una imagen o dicho de otra forma es un mapeado de imágenes.

Oloman nos ofrecía una estupenda explicación que recomiendo porque nos explica con detalle la forma de crear las coordenadas mediante HTML,  me parece la forma más correcta de hacerlo sin embargo la facilidad de uso de este generador tienta bastante porque el resultado es el mismo y nos ahorramos muchos cálculos y tiempo. Aún así vuelvo a decir que es mucho más útil aprender a hacer las cosas que hacerlas por la vía fácil sin saber lo que estamos haciendo.

Para crear la imagen con mapeado con  "Image Mapper" lo primero que necesitamos claro está es una imagen a la que añadiremos distintos enlaces, sabemos qué partes de la imagen son un enlace porque le vamos a añadir un texto en el lugar que irá cada uno. El texto lo podemos añadir con cualquier editor por ejemplo el Paint que todos tenemos en el PC.
Para el ejemplo he añadido tres textos es decir uno para cada enlace a modo de menú aunque también es posible y original simplemente utilizando algunos motivos de la imagen.
Una vez tenemos la imagen la subimos a nuestro sitio de alojamiento puede ser una entrada del blog que guardaremos más tarde en borrador o directamente a nuestro álbum de Piacasa de esa forma conseguimos la url de la imagen.

1- Añadimos la url de la imagen en "Image URL" la imagen se mostrará en la parte inferior cuando marquemos el botón "Load Image".
2-  Añadimos la url del sitio que vamos a enlazar en "Link".
3- En "Caption" es el espacio para añadir el texto que se mostrará al pasar el puntero sobre el enlace.
4- Marcamos sobre "New Link" y se mostrará un cuadradito que arrastraremos sobre el lugar exacto que será el texto que va a hacer de enlace o link. En las esquinas de ese cuadradito con el botón izquierdo del ratón podemos estirar y encoger hasta dar con el tamaño indicado.

Para cada enlace repetimos los pasos 2 - 3 y 4 una vez terminamos marcamos sobre el botón "Make Code" y nos proporciona el código listo para copiar y pegar en cualquier sitio del blog que permita html.



Inicio
Contactar
Todas las entradas

Jose, a secas

Me encanta. En su momento busqué algo parecido para una web que tenía... hace más de 10 años :D Anda que si llega a existir algo así... jeje.

Un saludo Gem@ ;)

Responder
Jose, a secas

Se me olvidaba... con tu permiso hago un RT ;)

Responder
Gem@

:: Estoy segura que lo pruebas o me vas a decir que ya se pasó la afición por estas cosas??
Mira que pedir permiso para hacer un RT :O

Responder
Jose, a secas

Jaja, ya no tengo la paciencia de cuando empecé con los blogs xD

Responder
Gem@

:: Ohhhh fue un pasatiempo entonces, a mi me dio fuerte y aún dura.

Responder
Jose, a secas

Bueeeno... digamos que fue un pasatiempo "pasajero", jeje.

A veces me pica el gusanillo pero me desespero y vuelvo a aparcarlo. Fruto de ello es la nueva plantilla del blog y algunos de los widgets que he ido incluyendo.

Responder
MexaaC

WOW este truco es buenisimo, despues lo veo con mas tiempo
muchisimas gracias GEM@

Responder
Gem@

:: N.G. - C.W. gracias a ti por tomarte tu tiempo en comentar :)

Responder
Aurora

Hola, me gusta mucho esta aplicación pero tengo el mismo problema/duda que con el artículo de Oloblogger.
Si me pudieras ayudar, te lo agradecería muchísimo. Es esta: ¿cómo hacer para que al pasar el ratón por encima de los enlaces/links el texto o el dibujo cambie? Algo así como con los iconos de las redes sociales que ya explicaste en su día. ¿Cómo hacerlo en el mapeado? Muchas gracias

Responder
Aurora

Me refiero a que por ejemplo cambie el color del texto, o se oscurezca o aclare... Vamos, que se note un poco que pasamos el ratón por encima. Gracias.

Responder
Gem@

:: Aurora en este caso no se puede hacer porque la fuente está impresa en la imagen, lo que se consigue es que una zona concreta en este caso la zona de cada texto haga la función de hipervínculo.

Responder
Aurora

Entendido. ¿Y cómo podría hacer para lograr ese efecto? Llevo como un añoo sin aclararme. Mi idea es lograr que aparezcan unos links sobre una imagen -como en el mapeado- pero que tengan algún cambio al pasar el ratón x encima.
Sé poner un menú bajo el header o bajo una imagen que aparezca en vez de el header, pero no sé cómo poner una imagen con enlaces que tengan algún efecto:) (me repito, pero es q es un tema q me pone de los nervios! :) )
Muchísimas gracias.

Responder
Jose

Hola Gem@.
Este "invento" es genial. Hace poco hice un curso de html y ya me pareció que tenía muchas posibilidades, aunque había que crearlo prácticamente a mano y era un montón de trabajo. Ahora que lo he probado de esta forma, ¡puff!, es una maravilla, no tardas nada.
Gracias de nuevo, guapa. Besos.

Responder
Jose

Ah, se me olvidaba. Aquí te envío una página de imágenes muy buena. Sólo hay que registrarse.
http://sxc.hu/
Espero que os sirva. B7s

Responder
Gem@

:: La verdad lo desconozco Aurora ¿preguntaste a Oloman que hizo el tutorial?

:: Hola Jose :D que bien que hiciste el curso!!
Los generadores son una maravilla lo malo es que cuando menos l oesperas la página desaparece ¿recuerdas aquella que nos venía también? suele pasar.
Gracias por la página voy a "investigar" ;)

Responder
Jose

Hola de nuevo, Gem@. Sigo dándole vueltas a esto de los mapas y me surgen algunas dudas. Si quiero utilizar un mapa como cabecera, podría eliminar el gadget de cabecera de la plantilla e insertar el código en un gadget de html, ¿no? La cuestión es que si luego, en algún momento decidiera volver al gadget de cabecera, ¿podría recuperarlo de nuevo? Imagino que sí, aunque fuese copiando el código desde otra plantilla de pruebas o algo así, pero bueno, no sé si todo esto que te cuento es correcto.
ya me sacarás de dudas.
Besos.

Responder
Gem@

:: No recomiendo eliminar el gadget de la cabecera Jose, ahí está el título.
Lo que si puede hacerse es condicionar para que el header es decir la cabecera no se muestre y añadir la imagen con mapeado en un gadget.
Otra idea mucho más sencilla es ocultar el espacio del header con visibility:hidden y display:none;

#header-wrapper {
visibility:hidden;
display:none;
.............
.............
}
el espacio de los puntos será lo que ya tienes añadido que no lo tocamos.
Te paso una entrada que veas más o menos de qué va ese tema %% visibility:hidden y display:none

Responder
Jose

Mil gracias, Gem@. Voy a ver qué se me ocurre hacer con esto. Besitos.

Responder
Gem@

:: Suerte Jose :D

Responder
Blogroll

Hola Gema yo tengo ya creado mi mapeado de imagen pero me estoy complicando en poner los enlaces , creo k por error elimine unos codigos o me faltan agregarlos :S:S
Lo que necesito es enlazar la cabecera de mi blog con tres menus.
Mira Gema me estoy inspirando en este plantilla en su cabecera de su mapeado de imagenes link: (http://www.telavelox.com)y me gustaria realizar algo así porque me agrada y se ve algo nuevo.
Gracias y Saludos!
Mi Blog es: http://vagostubepeliculas.blogspot.com, ahi puedes ver los codigos que tengo derrepente uno x ahi se me esta escapando.

Responder
Blogroll

Hola Gema te comento que yo tengo ya creado mi mapeado de imagen pero me estoy complicando en poner los enlaces , creo k por error elimine unos codigos :S:S
Lo que necesito es enlazar la cabecera de mi blog con tres menus.
Mira Gema me estoy inspirando en este plantilla en su cabecera de su mapeado de imagenes link: (http://www.telavelox.com).
Gracias y Saludos!
Mi Blog es: http://vagostubepeliculas.blogspot.com, ahi puedes ver los codigos que tengo derrepente uno x ahi se me esta escapando.

Responder
Gem@

:: A simple vista lo que veo es que la imagen mapeada se debe añadir tal cual para que los enlaces funcionen.
La imagen de tu cabecera la tienes añadida en los estilos de "topo" y ahí no se puede añadir el mapeado.
Intenta añadir el código que te proporcionan en un gadget de html donde iría la cabecera o mejor prueba en otro blog con la misma plantilla para no cometer errores ;)

Responder
Blogroll

Gem@ muchas gracias por responder, mm seguire probando, me parece que me falta agregar (li) para hacia realizar el mapeado, si no me sale seguire tu consejo.
Saludos y Gracias :D

Responder
Gem@

:: Vagostube con el código que proporcionan en la página no hace falta que añadas nada simplemente el código que proporcionan, eso si lo estás haciendo como se indica en esta entrada si es de otra forma no sé que decirte :S

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top